<template>
  <div class="tababr">
    <div v-for="(item,index) in list" :key="index+'aaa'" class="item">
            <template v-if="item.select">
                <img :src="item.img1" class="select" @click="selectitem(index,item.select)">
                  <span class="select" @click="selectitem(index,item.select)">{{item.title}}</span>
            </template>
            <template v-else>
                <img :src="item.img" class="default" @click="selectitem(index,item.select)">
                 <span class="default" @click="selectitem(index,item.select)">{{item.title}}</span>
            </template>
    </div>
  </div>
</template>
<script>
export default {
	props: {
		list: {}
	},
	data() {
		return {
			idx: []
		}
	},
	methods: {
		selectitem(index, item) {
			this.$nextTick(() => {
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].select = 0
				}
				this.list[index].select = 1
      })
      switch(index){
        case 0:
          this.$router.push('/')
        break;
        case 1:
          this.$router.push('/servcice/service')
      }
		}
	}
}
</script>
<style lang="scss" scoped>
.tababr {
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	left: 0;
	right: 0;
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		img {
			height: 2.5rem;
			width: 2.5rem;
		}
		span {
			height: 1rem;
			line-height: 1rem;
			padding: 0.3rem 0;
		}
    .select{
      color: #ce4f4c;
    }
	}
}
</style>

